<template>
	<!--回看和直播间公用一个组件-->
	<div class="middle-nav-box" :class="{'zgrs':themeColor === 'zgrs'}">
		<!--<div class="nav-titile-hed" :class="{activeru:index==liveCur}" v-for="(v,index) of navTabArray" :key='index' @click="clickNavTab(v,index)" >
			<span>{{v.title}}</span>
		</div>-->
		<van-tabs v-model="active" @click="clickNavTab" line-height='2px' line-width='50px' background='transparent' :title-active-color='[navColor]' swipe-threshold='4'  swipeable='false'>
			<van-tab v-for="(v,index) of navTabArray" :name='v.type' :key='index' :title="v.title" title-class='title-class'  ></van-tab>
		</van-tabs>
	</div>
</template>

<script>
	//import { Tab, Tabs } from 'vant';
	export default {
		props: {
			navTabArray: {
				type: Array,
				default: function() {
					return []
				}
			},
			themeColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				liveCur: '',
				active: '',
				navColor:'',//默认颜色
			}
		},
		created() {
			this.active = this.navTabArray[0].type;
			if(this.themeColor =='zgrs'){
				this.navColor = '#529E89'
			}else{
				this.navColor = 'rgb(204, 53, 56)'
			}
		},
		methods: {
			// tab切换
			clickNavTab(name, title) {
				this.$emit('formChildMsg', {
					type: 'navType',
					data: name
				});
			}
		}
	}
</script>
<style scoped="scoped">
	.middle-nav-box >>>.van-tabs {
		width: 100%;
		height: 70px;
	}
	.middle-nav-box >>>.van-tab {
		font-size: 28px;
		color: #999;
	}
	.middle-nav-box >>>.van-tab .van-tab__text{
		line-height: normal;
		}
	.van-tabs>>>.van-tabs__wrap {
		height: 70px !important;
		font-size: 28px;
	}
	 .middle-nav-box >>>.van-tabs__content{
	 	display: none;
	 }
	.van-tabs>>>.van-tabs__line {
		border-bottom: 4px solid rgb(204, 53, 56);
		color: rgb(204, 53, 56) !important;
	}
	.zgrs >>>.van-tabs__line {
		border-bottom: 4px solid #529E89;
		color: #529E89 !important;
	}
	.middle-nav-box {
		width: 100%;
		height: 70px;
		display: flex;
		display: -webkit-flex;
		color: #999999;
		background: white;
		justify-content: space-around;
		padding: 0 0 0 10px;
		border-bottom: 2px solid rgba(221, 221, 222, 0.5);
		font-size: 28px;
	}
	
	.nav-titile-hed {
		height: 70px;
		display: flex;
		display: -webkit-flex;
		color: #999999;
		background: white;
		justify-content: space-around;
		align-items: center;
		padding: 0 10px;
		border-bottom: 2px solid rgba(221, 221, 222, 0.5);
	}
	
	.activeru {
		border-bottom: 4px solid rgb(204, 53, 56);
		color: rgb(204, 53, 56) !important;
	}
	
	.activeru span {
		color: rgb(204, 53, 56) !important;
	}
	
	.nav-titile-hed {
		/* width: 25%;*/
		/*background: pink;*/
		line-height: 60px;
		text-align: center;
	}
	
	.nav-titile-hed span {
		color: #999;
		font-size: 28px;
	}
</style>